<template>
  <div>
    <a-row :gutter="[24, 24]">
      <!-- 访问人数 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="lyt-component-lg text-center">
          <a-avatar style="background-color: #7cbefb">
            <template #icon>
              <UsergroupAddOutlined />
            </template>
          </a-avatar>
          <a-typography-title :level="2">21.10K</a-typography-title>
          <div>访问人数（近30天）</div>
          <div class="error-color mt-6">
            <ArrowDownOutlined />&nbsp;50%
          </div>
        </div>
      </a-col>
      <!-- 点击量 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="lyt-component-lg text-center">
          <a-avatar style="background-color: #caa8f3">
            <template #icon>
              <AimOutlined />
            </template>
          </a-avatar>
          <a-typography-title :level="2">48.30K</a-typography-title>
          <div>点击量（近30天）</div>
          <div class="success-color mt-6">
            <ArrowUpOutlined />&nbsp;60%
          </div>
        </div>
      </a-col>
      <!-- 到达量 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="lyt-component-lg text-center">
          <a-avatar style="background-color: #ffcb8d">
            <template #icon>
              <SafetyOutlined />
            </template>
          </a-avatar>
          <a-typography-title :level="2">348.10</a-typography-title>
          <div>到达量（近30天）</div>
          <div class="error-color mt-6">
            <ArrowDownOutlined />&nbsp;20%
          </div>
        </div>
      </a-col>
      <!-- 转化率 -->
      <a-col :xs="24" :sm="12" :xl="6">
        <div class="lyt-component-lg text-center">
          <a-avatar style="background-color: #bcff9f">
            <template #icon>
              <RiseOutlined />
            </template>
          </a-avatar>
          <a-typography-title :level="2">35.60%</a-typography-title>
          <div>转化率（近30天）</div>
          <div class="success-color mt-6">
            <ArrowUpOutlined />&nbsp;10%
          </div>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[24, 24]" class="mt-24">
      <a-col :xs="24" :sm="24" :xl="18">
        <!-- 近一小时访问情况 -->
        <a-card>
          <template #title>
            <a-avatar style="background-color:var(--primary-color-base);" :size="24" class="mr-12">
              <template #icon>
                <StockOutlined />
              </template>
            </a-avatar>近一小时访问情况
          </template>
          <!-- <div id="visit-container" style="height: 453.4px"></div> -->
          <div id="visit-container" style="height: 400px"></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :xl="6">
        <a-row :gutter="[24, 24]">
          <!-- 当前在线 -->
          <a-col :xs="24" :sm="12" :xl="24">
            <a-card>
              <template #title>
                <a-avatar class="mr-12" :size="24" style="background-color: #25bc0a">
                  <template #icon>
                    <BulbOutlined />
                  </template>
                </a-avatar>当前在线
              </template>
              <div class="text-center" style="height: 133px">
                <a-statistic>
                  <template #title>{{ nowTime }}</template>
                  <template #formatter>
                    <a-typography-title
                      class="mb-10"
                      :level="1"
                      style="color: var(--primary-color-6);"
                    >{{ number }}</a-typography-title>
                  </template>
                </a-statistic>
                <div>在线访客数</div>
                <div class="mt-6">
                  <span class="zoom mr-12"></span>
                  {{ countDown }}&nbsp;&nbsp;秒后更新
                </div>
              </div>
            </a-card>
          </a-col>
          <!-- 当前活跃度 -->
          <a-col :xs="24" :sm="12" :xl="24">
            <a-card>
              <template #title>
                <a-avatar class="mr-12" :size="24" style="background-color: #ff67ba">
                  <template #icon>
                    <CoffeeOutlined />
                  </template>
                </a-avatar>当前活跃度
              </template>
              <div id="activity-container" style="height: 133px"></div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row :gutter="[24, 24]" class="mt-24">
      <!-- 当前在线 -->
      <a-col :xs="24" :sm="24" :xl="12">
        <a-card>
          <template #title>
            <a-avatar class="mr-12" :size="24" style="background-color: #fedc8d">
              <template #icon>
                <LikeOutlined />
              </template>
            </a-avatar>平均评价
          </template>
          <div style="height: 200px;">
            <div>
              <a-typography-title class="inline-block">4.5</a-typography-title>
              <a-rate :value="4.5" disabled allow-half class="ml-12" />
            </div>
            <div class="progress-list" style="height: 140px;">
              <div class="flex">
                <a-progress :percent="80" :show-info="false" strokeColor="#52c41a" />
                <span class="text-color-secondary ml-12" style="width: 80px">
                  <StarFilled />&nbsp;5：320
                </span>
              </div>
              <div class="flex">
                <a-progress :percent="65" :show-info="false" strokeColor="#1890ff" />
                <span class="text-color-secondary ml-12" style="width: 80px">
                  <StarFilled />&nbsp;4：260
                </span>
              </div>
              <div class="flex">
                <a-progress :percent="20" :show-info="false" strokeColor="#ffc53d" />
                <span class="text-color-secondary ml-12" style="width: 80px">
                  <StarFilled />&nbsp;3：60
                </span>
              </div>
              <div class="flex">
                <a-progress :percent="3" :show-info="false" strokeColor="#ff4d4f" />
                <span class="text-color-secondary ml-12" style="width: 80px">
                  <StarFilled />&nbsp;2：10
                </span>
              </div>
              <div class="flex">
                <a-progress :percent="0" :show-info="false" />
                <span class="text-color-secondary ml-12" style="width: 80px">
                  <StarFilled />&nbsp;1：0
                </span>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :xl="6">
        <a-card>
          <template #title>
            <a-avatar class="mr-12" :size="24" style="background-color: #f5a623">
              <template #icon>
                <SmileOutlined />
              </template>
            </a-avatar>客户满意度
          </template>
          <div class="text-center" style="height: 200px;">
            <div>
              <div class="flex-center">
                <a-typography-title :level="2" class="mb-0">863</a-typography-title>
                <SmileTwoTone twoToneColor="#f5a623" style="font-size: 3em" class="ml-34 mr-34" />
                <a-typography-title class="success-color mb-0" :level="3">95%</a-typography-title>
              </div>
              <div class="mt-12 text-color-secondary">正面评论</div>
            </div>
            <a-divider />
            <div>
              <div class="flex-center">
                <a-typography-title :level="2" class="mb-0">12</a-typography-title>
                <FrownTwoTone twoToneColor="#f5a623" style="font-size: 3em" class="ml-34 mr-34" />
                <a-typography-title class="error-color mb-0" :level="3">4%</a-typography-title>
              </div>
              <div class="mt-12 text-color-secondary">负面评论</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12" :xl="6">
        <a-card>
          <template #title>
            <a-avatar class="mr-12" :size="24" style="background-color: #ff8182">
              <template #icon>
                <TrophyOutlined />
              </template>
            </a-avatar>本月目标
          </template>
          <div class="text-center" style="height: 200px;">
            <a-progress
              type="circle"
              :width="180"
              :percent="85"
              gapPosition="bottom"
              :gapDegree="100"
            >
              <template #format>
                <!-- <div> -->
                <a-avatar class="mb-10" :size="34" style="background-color: #67b6ff">
                  <template #icon>
                    <CrownOutlined />
                  </template>
                </a-avatar>
                <!-- </div> -->
                <a-typography-title class="mb-0">260</a-typography-title>
              </template>
            </a-progress>
            <div class="text-color-secondary">恭喜，本月目标已达标！</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang='ts'>
export default { name: 'monitor' };
import { nextTick, ref } from 'vue';
import { Area, RadialBar } from '@antv/g2plot';
import moment from 'moment';
const visitData = [
  { "category": "浏览量", "time": '08:00', "value": 20 },
  { "category": "浏览量", "time": '09:00', "value": 30 },
  { "category": "浏览量", "time": '10:00', "value": 60 },
  { "category": "浏览量", "time": '11:00', "value": 90 },
  { "category": "浏览量", "time": '12:00', "value": 130 },
  { "category": "浏览量", "time": '13:00', "value": 260 },
  { "category": "浏览量", "time": '14:00', "value": 340 },
  { "category": "浏览量", "time": '15:00', "value": 250 },
  { "category": "浏览量", "time": '16:00', "value": 180 },
  { "category": "浏览量", "time": '17:00', "value": 265 },
  { "category": "浏览量", "time": '18:00', "value": 210 },

  { "category": "访客数", "time": '08:00', "value": 15 },
  { "category": "访客数", "time": '09:00', "value": 18 },
  { "category": "访客数", "time": '10:00', "value": 34 },
  { "category": "访客数", "time": '11:00', "value": 56 },
  { "category": "访客数", "time": '12:00', "value": 70 },
  { "category": "访客数", "time": '13:00', "value": 140 },
  { "category": "访客数", "time": '14:00', "value": 230 },
  { "category": "访客数", "time": '15:00', "value": 180 },
  { "category": "访客数", "time": '16:00', "value": 100 },
  { "category": "访客数", "time": '17:00', "value": 190 },
  { "category": "访客数", "time": '18:00', "value": 131 },
]
const activityData = [
  { name: '跳出率', value: 20 },
  { name: '留存率', value: 40 },
  { name: '活跃率', value: 80 },
]
</script>
<script lang="ts" setup>
import { UsergroupAddOutlined, AimOutlined, SafetyOutlined, RiseOutlined } from '@ant-design/icons-vue';
import { ArrowUpOutlined, ArrowDownOutlined, StockOutlined, BulbOutlined, CoffeeOutlined } from '@ant-design/icons-vue';
import { LikeOutlined, StarFilled, SmileOutlined, SmileTwoTone, TrophyOutlined, FrownTwoTone, CrownOutlined } from '@ant-design/icons-vue';
nextTick(() => {
  new Area('visit-container', {
    data: visitData,
    smooth: true,
    xField: 'time',
    yField: 'value',
    seriesField: 'category',
    legend: {
      position: 'top-right',
    }
  }).render();
  new RadialBar('activity-container', {
    data: activityData,
    xField: 'name',
    yField: 'value',
    maxAngle: 300, //最大旋转角度,
    radius: .9,
    innerRadius: .3,
    barBackground: {},
    barStyle: { lineCap: 'round' },
    colorField: 'name',
    color: ({ name }) => {
      if (name === '活跃率') return '#2fc25b';
      if (name === '留存率') return '#1890ff';
      return '#f44336';
    },
    tooltip: {
      formatter: (datum) => {
        return { name: datum.name, value: datum.value + '%' };
      },
    },
  }).render();

})

const nowTime = ref(moment().format("HH:mm:ss"))
const number = ref(parseInt((Math.random() * (300 - 100 + 1) + 100).toString()))
const countDown = ref(6)
setInterval(() => { nowTime.value = moment().format("HH:mm:ss") }, 1000);
setInterval(() => {
  countDown.value--
  if (countDown.value == 0) {
    countDown.value = 6
    setNumber()
  }
}, 1000)
let interval: any
function setNumber() {
  clearInterval(interval)
  const newNumber = parseInt((Math.random() * (300 - 100 + 1) + 100).toString())
  interval = setInterval(() => {
    if (number.value === newNumber) return clearInterval(interval)
    if (number.value > newNumber) {
      number.value--
    } else if (number.value < newNumber) {
      number.value++
    }
  }, 10)

}
</script>
<style lang="less" scoped>
.progress-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.zoom {
  width: 0.6em;
  height: 0.6em;
  display: inline-block;
  border-radius: 50%;
  background-color: var(--primary-color-base);
  position: relative;
  vertical-align: middle;
  margin-top: -0.1em;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--primary-color-base);
    position: absolute;
    top: 0;
    left: 0;
    animation: ani-zoom 1s infinite;
  }
}
@keyframes ani-zoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.3;
    transform: scale(2);
  }
}
</style>
